<template>
    <div class="mt-16px table-container">
        <el-table :data="state.tableData" class="w-full">
            <el-table-column width="10px" />
            <el-table-column label="搜索词" prop="name" align="left" />
            <el-table-column label="浏览量(PV)" prop="pv" align="center" width="120px" />
            <el-table-column label="占比" prop="proportion" align="center" width="120px">
                <template #default="scope">
                    {{ scope.row.proportion }}%
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
const state = reactive({
    tableData:[
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
        {
            name:'塑料粉碎机',
            pv:100,
            proportion:2.56
        },
    ]
})
</script>

<style scoped>

</style>